<template>
  <el-dialog
    :visible.sync="showDialog"
    class="iconDialog"
    @close="111"
    :modal="false"
    :show-close="false"
    :center="true"
    width="50%"
    style="overflow: hidden"
  >
    <el-row>
      <el-col
        :span="8"
        v-for="(item, ind) in showList"
        :key="ind"
        @click.native="iconClick(item)"
      >
        <div>
          <svgIcon :iconClass="item" /> <span>{{ item }}</span>
        </div>
      </el-col>
    </el-row>

    <div slot="title">
      <el-input
        placeholder="请输入图标名称"
        suffix-icon="el-icon-search"
        v-model="iconName"
        @keyup.native="iptChange(iconName)"
      >
      </el-input>
    </div>
  </el-dialog>
</template>

<script>
import svgIcon from "@/components/SvgIcon";
import "@/icons/index";
import iconName from "@/icons/index";
export default {
  name: "iconDialog",
  components: {
    svgIcon,
  },
  data() {
    return {
      showDialog: false,
      iconName: "",
      list: iconName,
      item: "",
      showList: iconName
    };
  },
  methods: {
    //   点击图标事件
    iconClick(item) {
      this.item = item;
      this.$emit("changeIcon");
      this.showDialog = false;
    },
    // 图标输入事件
    iptChange(iconName) {
    //   console.log(iconName);
      if (iconName.trim() === "") return (this.showList = this.list);
      this.showList = this.list.filter((item) => {
        return item.includes(iconName);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.iconDialog {
  margin-top: 33vh;
  margin-left: 18vh;
}
</style>
